Confirm?

Are you sure you want to proceed?
A
Alex Rodrigo Villalobos

Login Page Tailwind Blazor

Clone & Customize via AI

Responsive Tailwind Login Form Blazor page using EditForm validation and InputText bindings. Includes a centered sign-in card, password visibility toggle, remember checkbox and demo credentials.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Sign-in form with email and password fields, remember-me checkbox and submit button. - Client-side validation via DataAnnotations and ValidationMessage components. - Password visibility toggle implemented with a boolean flag and InputText type switch. - Demo credentials panel and a right-side marketing/info panel implemented as RenderFragments. ## Key components - EditForm, DataAnnotationsValidator, ValidationMessage - InputText, InputCheckbox, standard button with @onclick and type=submit - @bind-Value bindings for model properties - RenderFragment FeatureCard used to render marketing cards - LoginViewModel with DataAnnotations attributes (Required, EmailAddress) ## How it works - The page uses an EditForm bound to a LoginViewModel instance and handles valid submission via OnValidSubmit="HandleLogin". - Validation uses DataAnnotationsValidator and ValidationMessage For expressions to display field errors. - Password visibility is toggled by changing the InputText type between "text" and "password" based on the showPassword boolean; TogglePasswordVisibility flips the flag. - RememberMe uses InputCheckbox with @bind-Value; feature cards are returned as a RenderFragment for reuse. ## Styling - Uses Tailwind CSS utility classes across layout and form controls (bg-gray-50, lg:grid, flex, gap-10, rounded-md, shadow-lg, p-4). - Layout is responsive with a two-column grid on large screens and a centered single-column form on smaller viewports. - Icons rely on Font Awesome classes (fa-*) which require including the Font Awesome stylesheet in the host page. ## Reuse steps 1. Add Tailwind CSS to the project and ensure the global stylesheet includes Tailwind utilities. 2. Add the LoginViewModel class to a shared Models folder and import System.ComponentModel.DataAnnotations. 3. Place the Razor page under Pages and confirm the @page route ("/login"). 4. Include Font Awesome or replace icons with SVGs or icon components. 5. Wire the HandleLogin method to an authentication service or Identity endpoint and replace Console.WriteLine with real logic. ## Limitations & next steps - This is a single-page UI scaffold generated by Instruct UI; backend authentication, token handling, error mapping, and secure password handling are not implemented. - Requires service wiring (authentication service, navigation, and user state) to perform real sign-in and redirection. - Accessibility improvements: connect labels with inputs via for/id, add aria attributes and server-side error handling. - Consider centralizing styling tokens or converting repeated Tailwind classes into component fragments for reuse.